<template>
  <gui-page>
    <template v-slot:gBody>
      <view class="gui-padding-x">
        <form @submit="submit">
          <view
            class="gui-flex gui-align-items-center gui-justify-content-center"
            style="margin: 50rpx 0"
          >
            <view @tap="updateAvatar" style="width: 180rpx; height: 180rpx">
              <image
                style="
                  width: 180rpx;
                  height: 180rpx;
                  border-radius: 180rpx;
                  border: 1rpx solid #ffffff;
                "
                class="gui-list-image ucenter-face-image"
                :src="author.userPic"
                mode="aspectFill"
              >
              </image>
            </view>
          </view>

          <view
            class="gui-bg-white gui-dark-bg-level-3 gui-padding-x gui-border-radius-large"
          >
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text xhs-gray-color1"
                >名字</text
              >
              <view class="gui-form-body">
                <input
                  type="text"
                  class="gui-form-input"
                  v-model="author.nickname"
                  name="authorName"
                  placeholder="请输入内容"
                />
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>

            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text xhs-gray-color1"
                >摇爪号</text
              >
              <view class="gui-form-body">
                <input
                  type="text"
                  class="gui-form-input"
                  v-model="author.authorNo"
                  disabled
                  name="authorNo"
                  placeholder="请输入内容"
                />
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>

            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">背景图</text>
              <view class="gui-form-body xhs-margin-top-10">
                <image
                  @tap="updateBackground"
                  class="gui-border-radius-large"
                  style="width: 200rpx; height: 100rpx"
                  :src="author.backGroundPic"
                  mode="aspectFill"
                >
                </image>
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>
          </view>

          <view
            class="gui-bg-white gui-dark-bg-level-3 gui-padding-x gui-margin-top gui-border-radius-large"
          >
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text xhs-gray-color1"
                >简介</text
              >
              <view class="gui-form-body">
                <input
                  type="text"
                  class="gui-form-input"
                  v-model="author.description"
                  name="description"
                  placeholder="请输入内容"
                />
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>
          </view>

          <view
            class="gui-bg-white gui-dark-bg-level-3 gui-padding-x gui-margin-top gui-border-radius-large"
          >
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label xhs-gray-color1">性别</text>
              <view class="gui-form-body">
                <picker mode="selector" :range="gender" @change="pickerChange">
                  <view
                    class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
                  >
                    <text class="gui-text gui-secondary-text">{{
                      gender[author.sex] ? gender[author.sex] : "请选择"
                    }}</text>
                  </view>
                </picker>
              </view>

              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>

            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text xhs-gray-color1"
                >生日</text
              >
              <view class="gui-form-body">
                <gui-datetime
                  :startYear="1900"
                  @confirm="birthConfirm"
                  :value="author.birth"
                  :isTime="false"
                >
                  <text>{{ author.birth ? author.birth : "请选择" }}</text>
                </gui-datetime>
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>

            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text xhs-gray-color1"
                >地区</text
              >
              <view class="gui-form-body">
                <text
                  class="gui-block gui-text gui-primary-text"
                  @tap="openArea"
                  >{{ author.area ? author.area : "请选择" }}</text
                >
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>

            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text xhs-gray-color1"
                >职业</text
              >
              <view class="gui-form-body">
                <input
                  type="text"
                  class="gui-form-input"
                  v-model="author.job"
                  name="authorNo"
                  placeholder="请输入内容"
                />
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>

            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text xhs-gray-color1"
                >学校</text
              >
              <view class="gui-form-body">
                <input
                  type="text"
                  class="gui-form-input"
                  v-model="author.school"
                  name="authorNo"
                  placeholder="请输入内容"
                />
              </view>
              <text
                class="gui-form-icon gui-icons gui-text-center gui-color-gray"
                >&#xe601;
              </text>
            </view>
          </view>

          <view
            class="footer gui-flex gui-justify-content-center gui-align-items-center"
          >
            <view style="width: 80%">
              <button
                @tap="submit"
                type="default"
                class="gui-button-mini xhs-border-radius50"
                style="width: 100%; margin-right: 0 auto; background: #d9f700"
              >
                <text class="gui-icons">保存</text>
              </button>
            </view>
          </view>

          <gui-area-picker
            ref="graceAddressPicker2"
            @confirm="confirmArea"
            :value="default2"
            v-if="default2 != null"
          ></gui-area-picker>
          <view style="height: 60rpx"></view>
        </form>
      </view>
    </template>
  </gui-page>
</template>
<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      // 表单数据存储
      // 密码可视 类型切换
      isPwd: true,
      // picker
      gender: ["请选择性别", "男", "女"],
      genderIndex: 0,
      author: {
        name2: "",
        avatarUrl: "http://8.146.211.120:8080/upload/notes/note (6).jpg",
      },
      demo2Val: "",
      value2: "",
      default2: null,
      authorId: "",
      url: "",
    };
  },
  onLoad(e) {
    this.url = window.location.href;
    this.authorId = e.authorId;
    this.init();
    setTimeout(() => {
      this.setDef();
      // 触发提交事件
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.graceAddressPicker2.confirm();
        }, 500);
      });
    }, 500);
  },
  onShow() {},
  methods: {
    init() {
      uni.app.post(
        "/blog/author/getMine",
        {
          authorId: this.authorId,
        },
        "json",
        "",
        (res) => {
          console.log(res);
          this.author = res.data;
        },
      );
    },
    updateAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          var file = res.tempFiles[0];
          if (file.size > 2 * (1024 * 1024)) {
            uni.app.msg("图片尺寸过大，已忽略");
            return;
          }
          console.log(res);
          uni.showLoading({
            title: "上传中",
            mask: true,
          });
          //拿到数据后上传
          uni.uploadFile({
            url: `https://www.yaozhuasocial.com/yaozhua/fe/aliImageUpload`,
            filePath: file.path,
            name: file.fileName,
            formData: {
              fileSavePath: "/avatar",
            },
            success: (uploadRes) => {
              console.log(JSON.parse(uploadRes.data));
              try {
                uploadRes = JSON.parse(uploadRes.data);
                if (uploadRes.code != 2000) {
                  uni.showToast({
                    title: "上传失败 : " + uploadRes.message,
                    icon: "none",
                  });
                } else {
                  //上传图片成功
                  console.log(uploadRes.data);
                  uni.hideLoading();
                  uni.showToast({
                    title: "上传成功",
                  });
                  uni.app.post(
                    "/blog/author/updateAuthorAvatar",
                    {
                      fileUrl: uploadRes.data.imageUrl,
                      fileThumbnailsUrl: uploadRes.data.thumbnailsUrl,
                      authorId: this.authorId,
                    },
                    "",
                    "",
                    (res) => {
                      this.author = res.data;
                    },
                  );
                }
              } catch (e) {
                console.error(e);
              }
            },
            fail: (e) => {
              uni.showToast({
                title: "上传失败，请点击图片重试",
                icon: "none",
              });
            },
          });
        },
        complete: function () {},
      });
    },
    updateBackground() {
      //修改背景图
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          var file = res.tempFiles[0];
          console.log(file.size > 2 * (1024 * 1024));
          if (file.size > 2 * (1024 * 1024)) {
            uni.app.msg("图片尺寸过大，已忽略");
            return;
          }
          console.log(file);
          //拿到数据后上传
          uni.uploadFile({
            url: this.$uploadUrl,
            filePath: file.path,
            name: file.fileName,
            formData: {
              fileSavePath: "/background",
            },
            success: (uploadRes) => {
              uni.showLoading({
                title: "上传中",
                mask: true,
              });
              try {
                uploadRes = JSON.parse(uploadRes.data);
                if (uploadRes.code != 2000) {
                  uni.showToast({
                    title: "上传失败 : " + uploadRes.data,
                    icon: "none",
                  });
                } else {
                  //上传图片成功
                  console.log(uploadRes.data);
                  uni.app.post(
                    "/blog/author/updateAuthorBackGround",
                    {
                      fileUrl: uploadRes.data,
                      authorId: uni.getStorageSync("userId"),
                    },
                    "",
                    "",
                    (res) => {
                      uni.hideLoading();
                      uni.showToast({
                        title: "上传成功",
                      });
                      this.author = res.data;
                    },
                  );
                }
              } catch (e) {
                this.error(index);
              }
            },
            fail: (e) => {
              uni.showToast({
                title: "上传失败，请点击图片重试",
                icon: "none",
              });
            },
          });
        },
        complete: function () {},
      });
    },
    setDef: function () {
      if (!uni.app.isEmpty(this.author.area)) {
        this.default2 = this.author.area.split(",");
      } else {
        this.default2 = ["河南省", ,];
      }
    },
    openArea: function () {
      console.log("open2");
      this.$refs.graceAddressPicker2.open();
    },
    confirmArea: function (e) {
      // 返回选中城市的编号及文本信息
      console.log(e);
      this.author.area = e.names[0] + "," + e.names[1] + "," + e.names[2];
    },
    birthConfirm: function (res) {
      this.author.birth = res[0] + "-" + res[1] + "-" + res[2];
    },
    // 清空输入框的值
    // picker 切换
    pickerChange: function (e) {
      this.author.sex = e.detail.value;
      this.author.sexStr = this.gender[this.genderIndex];
    },
    // 表单提交
    submit: function (e) {
      // 能够获得的表单数据 在 e 对象保存
      // 不支持表单直接获取的数据通过事件记录
      // 最终整理获得完整的表单记录
      console.log(this.author);

      uni.app.post(
        "/blog/author/updateMine",
        this.author,
        "json",
        "",
        (res) => {
          if (res.code == 2000) {
            uni.showToast({
              title: "信息更新成功",
            });
          }
        },
      );
    },
  },
};
</script>
<style scoped>
.footer {
  height: 100rpx;
  padding: 15rpx;
  width: 100%;
  position: fixed;
  z-index: 0;
  left: 0;
  bottom: 10rpx;
}
</style>
